<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue指令</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="d1">
    <p v-text="msg"></p>
    <p v-html="msg"></p>
    <!--
        此处存在报错,实际上不是错误
        Vue开发一般使用VSCode进行开发
        IDEA中对Vue的某些语法并不是识别
        当IDEA不识别对应语法的时候,会报错
        但是此处不是错误,不影响运行
    -->
    <button v-on:click="f1()">测试1</button><br/>
    <!-- 当方法没有参数的时候,可以省略括号 -->
    <!-- 可以使用@代替v-on: -->
    <button @click="f2">测试2</button><br/>
    <button @click="f3('Hello Vue')">测试3</button><br/>
    <!--
        取出用户输入的内容
        $event.target:用于获取当前事件源
    -->
    <input type="text" @input="f3($event.target.value)"><br/>
    <button @click="f4">测试4</button><br/>
    <!--
        可以在事件中通过key=值的方式改变数据仓库中指定数据的值
    -->
    <button @click="msg = 'Hello Vue'">测试5</button><br/>

    <p v-show="flag">这是第一个段落</p>
    <p v-show="!flag">这是第二个段落</p>

</div>
<script>
    new Vue({
        el: "#d1",
        data:{
            msg:"<h1>Hello Vue</h1>",
            flag: true
        },
        methods:{
            f1:function(){
                console.log("正在执行f1的方法");
            },
            // ES6语法
            f2(){
                console.log("正在执行f2的方法")
            },
            f3(args){
                console.log(args);
            },
            f4(){
                // 此处想要访问数据仓库中的数据
                // 不能直接通过key进行获取
                // 但是可以访问整个vue
                // 可以通过this表示整个Vue对象
                // 可以通过this.数据仓库的key用于获取数据仓库的内容
                console.log(this.msg);
                this.msg = "Hello Vue";
            }
        }
    })
</script>
</body>
</html>